<template>
  <div class="mobile-head">
    <img src="@/assets/images/nav.png" alt="" class="nav-left" @click="toggleNav">
    <img src="@/assets/images/logo.png" alt="" class="nav-logo">
    <div class="nav-list" :style="{display: isNavOpen ? 'block' : 'none'}">
      <div v-for="(item, index) in navList" :key="index" class="nav-item">
        <a :href="item.link">{{ item.name }}</a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const navList = ref([
  {
    name: 'About',
    link: '#'
  }, {
    name: 'Highlights',
    link: '#'
  }, {
    name: 'Guests',
    link: '#'
  }, {
    name: 'Agenda',
    link: '#'
  }, {
    name: 'Pitch',
    link: '#'
  }
])

const isNavOpen = ref(false)
const toggleNav = () => {
  isNavOpen.value = !isNavOpen.value
}
</script>

<style lang="scss" scoped>
  .mobile-head{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 44px;
    position: relative;
    background-color: #5DD849;
    margin-left: -30px;
    margin-right: -30px;
    z-index: 9;
    .nav-left{
      width: 20px;
      height: 20px;
      position: absolute;
      left: 23px;
      top: 50%;
      transform: translateY(-50%);
    }
    .nav-logo{
      width: 80px;
    }
    .nav-list{
      position: absolute;
      top: 44px;
      left: 0;
      right: 0;
      background-color: #5DD849;
      z-index: 999;
      box-shadow: 0 4px 5px rgba(0,0,0,.5);
      .nav-item{
        height: 44px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 30px;
        border-top: 1px solid #f0f0f0;
        a{
          color: #000;
          text-decoration: none;
        }
      }
    }
  }
</style>